<template>
	<div class="system-edit-dic-container">
		<el-drawer v-model="isShowDrawer" title="设备详情" direction="rtl" size="60%">
			<el-container style="height: 100%">
				<el-header style="height: 18%; margin-top: 10px">
					<el-card shadow="hover" class="layout-padding-auto" style="height: 100%">
						<el-row :gutter="20" align="middle">
							<el-col :span="3">
								<img :src="deviceBg" width="100" height="100" />
							</el-col>
							<el-col :span="21">
								<el-row :gutter="20" align="middle">
									<el-col :span="5">
										<div class="work-break" style="font-size: 18px; font-weight: bolder; width: 160px">名称：{{ deviceForm.name }}</div>
									</el-col>
									<el-col :span="3">
										<div class="work-break" style="font-size: 10px; color: #9b9b9b; width: 70px">ID ：{{ deviceForm.id }}</div>
									</el-col>
									<el-col :span="14"></el-col>
									<el-col :span="2">
										<div class="grid-content ep-bg-purple" />
										<el-switch
											class="ml-2"
											inline-prompt
											style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
											active-text="发布"
											inactive-text="停用"
											:active-value="1"
											:inactive-value="0"
											v-model="deviceForm.state"
											@change="editState()"
										/>
									</el-col>
								</el-row>
								<el-row :gutter="20" align="middle" style="height: 20px"></el-row>
								<el-row :gutter="20" align="middle">
									<el-col :span="6">
										<div class="work-break" style="font-size: 14px; color: #9b9b9b">产品名称：{{ productForm.name }}</div>
									</el-col>
									<el-col :span="6">
										<div class="work-break" style="font-size: 14px; color: #9b9b9b">部门名称：{{ deviceForm.deptName }}</div>
									</el-col>
									<el-col :span="12"> </el-col>
								</el-row>
								<el-row :gutter="20" align="middle" style="height: 5px"></el-row>
								<el-row :gutter="20" align="middle">
									<el-col :span="6">
										<div class="work-break" style="font-size: 14px; color: #9b9b9b">注册时间：{{ deviceForm.createTimeStr }}</div>
									</el-col>
									<el-col :span="18">
										<div class="work-break" style="font-size: 14px; color: #9b9b9b">描述：{{ deviceForm.describe }}</div>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-card>
				</el-header>
				<el-main style="height: 80%">
					<el-card shadow="hover" class="layout-padding-auto" style="height: 100%">
						<el-tabs v-model="tabsName">
							<el-tab-pane label="产品信息" name="first">
								<el-descriptions title="产品信息" :column="3" border>
									<el-descriptions-item label="产品名称" label-align="center" align="center">{{ productForm.name }} </el-descriptions-item>
									<el-descriptions-item label="所属部门" label-align="center" align="center">
										{{ productForm.deptName }}
									</el-descriptions-item>
									<el-descriptions-item label="消息协议" label-align="center" align="center">
										{{ productForm.messageProtocolName }}
									</el-descriptions-item>
									<el-descriptions-item label="连接协议" label-align="center" align="center">
										{{ productForm.transportProtocolName }}
									</el-descriptions-item>
									<el-descriptions-item label="存储策略" label-align="center" align="center">
										{{ productForm.storePolicyName }}
									</el-descriptions-item>
									<el-descriptions-item label="设备类型" label-align="center" align="center">
										{{ productForm.deviceTypeName }}
									</el-descriptions-item>
									<el-descriptions-item label="说明" label-align="center" align="left" min-width="100"
										>{{ productForm.describe }}
									</el-descriptions-item>
								</el-descriptions>
							</el-tab-pane>
							<el-tab-pane label="物模型" name="second">
								<div style="position: relative; float: right; z-index: 999" @click="viewTsl()">
									<el-button type="primary" text>物模型TSL</el-button>
									<el-drawer v-model="isShowTslDrawer" title="TSL" :append-to-body="true">
										<json-viewer :value="deviceForm.metadata" :expand-depth="5" copyable></json-viewer>
									</el-drawer>
								</div>
								<el-tabs v-model="tslName" type="card">
									<el-tab-pane label="属性定义" name="first">
										<el-container>
											<el-header style="text-align: right" height="40px">
												<el-button type="primary" @click="addTsl('properties')">添加</el-button>
												<el-drawer v-model="isShowPropertiesDrawer" title="属性" :append-to-body="true">
													<el-card class="layout-padding-auto" style="height: 96%; margin: 10px; overflow-y: auto">
														<el-form
															label-position="top"
															label-width="100px"
															style="max-width: 460px"
															:model="propertiesForm"
															ref="propertiesFormRef"
															:rules="propertiesRules"
														>
															<el-form-item label="属性标识" prop="id">
																<el-input v-model="propertiesForm.id" placeholder="请输入属性标识" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="属性名称" prop="name">
																<el-input v-model="propertiesForm.name" placeholder="请输入属性名称" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="数据类型" prop="valueType.type">
																<el-select v-model="propertiesForm.valueType.type" placeholder="请选择数据类型" clearable>
																	<el-option-group v-for="group in dataTypeList" :key="group.name" :label="group.name">
																		<el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id" />
																	</el-option-group>
																</el-select>
															</el-form-item>
															<div style="margin-bottom: 20px">
																<el-form-item
																	label="单位"
																	prop="valueType.unit"
																	v-if="
																		propertiesForm.valueType.type === 'int' ||
																		propertiesForm.valueType.type === 'long' ||
																		propertiesForm.valueType.type === 'float' ||
																		propertiesForm.valueType.type === 'double'
																	"
																>
																	<el-select v-model="propertiesForm.valueType.unit" placeholder="请选择单位" clearable>
																		<el-option-group v-for="group in unitList" :key="group.id" :label="group.name">
																			<el-option
																				v-for="item in group.options"
																				:key="item.id"
																				:label="item.name + '/' + item.symbol"
																				:value="item.id"
																			/>
																		</el-option-group>
																	</el-select>
																</el-form-item>
																<el-form-item
																	label="精度"
																	prop="valueType.scale"
																	v-if="propertiesForm.valueType.type === 'float' || propertiesForm.valueType.type === 'double'"
																>
																	<el-input-number
																		v-model="propertiesForm.valueType.scale"
																		placeholder="请输入精度"
																		:min="1"
																		:max="10"
																	></el-input-number>
																</el-form-item>
																<el-form-item label="最大长度" prop="valueType.expands.maxLength" v-if="propertiesForm.valueType.type === 'text'">
																	<el-input-number
																		v-model="propertiesForm.valueType.expands.maxLength"
																		placeholder="请输入长度"
																		:min="1"
																		:max="10"
																	></el-input-number>
																</el-form-item>
																<el-form-item label="布尔值" prop="valueType.trueText" v-if="propertiesForm.valueType.type === 'bool'">
																	<div>
																		<el-input v-model="propertiesForm.valueType.trueText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="propertiesForm.valueType.trueValue" style="display: inline-block; width: 40%" />
																	</div>
																	<div>
																		<el-input v-model="propertiesForm.valueType.falseText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="propertiesForm.valueType.falseValue" style="display: inline-block; width: 40%" />
																	</div>
																</el-form-item>
																<el-form-item label="时间格式" prop="valueType.format" v-if="propertiesForm.valueType.type === 'date'">
																	<el-select v-model="propertiesForm.valueType.format" placeholder="请选择时间格式" clearable>
																		<el-option v-for="item in dataFormatList" :key="item.id" :label="item.name" :value="item.id" />
																	</el-select>
																</el-form-item>
															</div>
															<el-form-item label="是否只读" prop="expands.readOnly">
																<el-radio-group v-model="propertiesForm.expands.readOnly">
																	<el-radio-button label="true">是</el-radio-button>
																	<el-radio-button label="false">否</el-radio-button>
																</el-radio-group>
															</el-form-item>
															<el-form-item label="属性来源" prop="expands.source">
																<el-select v-model="propertiesForm.expands.source" placeholder="请选择数据类型" clearable>
																	<el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.id" />
																</el-select>
															</el-form-item>
															<el-form-item label="描述">
																<el-input
																	v-model="propertiesForm.description"
																	type="textarea"
																	placeholder="请输入描述"
																	maxlength="150"
																	show-word-limit
																	:rows="4"
																></el-input>
															</el-form-item>
														</el-form>
														<div style="text-align: right; margin-top: 50px">
															<el-button type="primary" size="default" v-if="isPropertiesAdd" @click="submitTslForm('properties')">添 加</el-button>
															<el-button type="primary" size="default" v-else @click="submitTslForm('properties')">修 改 </el-button>
														</div>
													</el-card>
												</el-drawer>
											</el-header>
											<el-main>
												<el-scrollbar>
													<el-table :data="deviceForm.propertiesData">
														<el-table-column prop="id" label="标识" align="center" />
														<el-table-column prop="name" label="名称" align="center" :show-overflow-tooltip="true" />
														<el-table-column prop="valueType.type" label="数据类型" align="center" />
														<el-table-column prop="expands.source" label="属性来源" align="center">
															<template #default="scope">
																<div v-for="(item, index) of sourceList" :key="'sl-' + index">
																	<span v-if="scope.row.expands.source === item.id"> {{ item.name }}</span>
																</div>
															</template>
														</el-table-column>
														<el-table-column prop="expands.readOnly" label="是否只读" align="center">
															<template #default="scope">
																<el-tag type="success" v-if="scope.row.expands.readOnly === 'true'">是</el-tag>
																<el-tag type="info" v-else>否</el-tag>
															</template>
														</el-table-column>
														<el-table-column prop="description" label="说明" align="center" :show-overflow-tooltip="true" />
														<el-table-column label="操作" width="120" align="center">
															<template #default="scope">
																<el-button link type="primary" size="small" @click="editTsl(scope.row, scope.$index, 'properties')">编辑 </el-button>
																<el-button link type="primary" size="small" @click="deleteTsl(scope.$index, 'properties')">删除 </el-button>
															</template>
														</el-table-column>
													</el-table>
												</el-scrollbar>
											</el-main>
										</el-container>
									</el-tab-pane>
									<el-tab-pane label="功能定义" name="second">
										<el-container>
											<el-header style="text-align: right" height="40px">
												<el-button type="primary" @click="addTsl('functions')"> 添加</el-button>
												<el-drawer v-model="isShowFunctionsDrawer" title="功能" :append-to-body="true">
													<el-card class="layout-padding-auto" style="height: 96%; margin: 10px; overflow-y: auto">
														<el-form
															label-position="top"
															label-width="100px"
															style="max-width: 460px"
															:model="functionsForm"
															ref="functionsFormRef"
															:rules="functionsRules"
														>
															<el-form-item label="功能标识" prop="id">
																<el-input v-model="functionsForm.id" placeholder="请输入功能标识" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="功能名称" prop="name">
																<el-input v-model="functionsForm.name" placeholder="请输入功能名称" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="是否异步" prop="async">
																<el-radio-group v-model="functionsForm.async">
																	<el-radio-button :label="true">是</el-radio-button>
																	<el-radio-button :label="false">否</el-radio-button>
																</el-radio-group>
															</el-form-item>
															<el-form-item label="输出参数" prop="output.type">
																<el-select v-model="functionsForm.output.type" placeholder="请选择输出参数" clearable>
																	<el-option-group v-for="group in dataTypeList" :key="group.id" :label="group.name">
																		<el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id" />
																	</el-option-group>
																</el-select>
															</el-form-item>
															<div style="margin-bottom: 20px">
																<el-form-item
																	label="精度"
																	prop="output.scale"
																	v-if="functionsForm.output.type === 'float' || functionsForm.output.type === 'double'"
																>
																	<el-input-number v-model="functionsForm.output.scale" placeholder="请输入精度" :min="1" :max="10"></el-input-number>
																</el-form-item>
																<el-form-item
																	label="单位"
																	prop="output.unit"
																	v-if="
																		functionsForm.output.type === 'int' ||
																		functionsForm.output.type === 'long' ||
																		functionsForm.output.type === 'float' ||
																		functionsForm.output.type === 'double'
																	"
																>
																	<el-select v-model="functionsForm.output.unit" placeholder="请选择输出单位" clearable>
																		<el-option-group v-for="group in unitList" :key="group.id" :label="group.name">
																			<el-option
																				v-for="item in group.options"
																				:key="item.id"
																				:label="item.name + '/' + item.symbol"
																				:value="item.id"
																			/>
																		</el-option-group>
																	</el-select>
																</el-form-item>
																<el-form-item label="最大长度" prop="output.expands.maxLength" v-if="functionsForm.output.type === 'text'">
																	<el-input-number
																		v-model="functionsForm.output.expands.maxLength"
																		placeholder="请输入长度"
																		:min="1"
																		:max="10"
																	></el-input-number>
																</el-form-item>
																<el-form-item label="布尔值" v-if="functionsForm.output.type === 'bool'">
																	<div>
																		<el-input v-model="functionsForm.output.trueText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="functionsForm.output.trueValue" style="display: inline-block; width: 40%" />
																	</div>
																	<div>
																		<el-input v-model="functionsForm.output.falseText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="functionsForm.output.falseValue" style="display: inline-block; width: 40%" />
																	</div>
																</el-form-item>
																<el-form-item label="时间格式" v-if="functionsForm.output.type === 'date'">
																	<el-select v-model="functionsForm.output.format" placeholder="请选择时间格式" clearable>
																		<el-option v-for="item in dataFormatList" :key="item.id" :label="item.name" :value="item.id" />
																	</el-select>
																</el-form-item>
															</div>
															<el-form-item label="描述">
																<el-input
																	v-model="functionsForm.description"
																	type="textarea"
																	placeholder="请输入描述"
																	maxlength="150"
																	show-word-limit
																	:rows="4"
																></el-input>
															</el-form-item>
														</el-form>
														<div style="text-align: right; margin-top: 50px">
															<el-button type="primary" size="default" v-if="isFunctionsAdd" @click="submitTslForm('functions')">添 加</el-button>
															<el-button type="primary" size="default" v-else @click="submitTslForm('functions')">修 改</el-button>
														</div>
													</el-card>
												</el-drawer>
											</el-header>
											<el-main>
												<el-scrollbar>
													<el-table :data="deviceForm.functionsData">
														<el-table-column prop="id" label="标识" align="center" />
														<el-table-column prop="name" label="名称" align="center" :show-overflow-tooltip="true" />
														<el-table-column prop="async" label="是否异步" align="center">
															<template #default="scope">
																<el-tag type="success" v-if="scope.row.async">是</el-tag>
																<el-tag type="info" v-else>否</el-tag>
															</template>
														</el-table-column>
														<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true" />
														<el-table-column label="操作" width="120" align="center">
															<template #default="scope">
																<el-button link type="primary" size="small" @click="editTsl(scope.row, scope.$index, 'functions')">编辑 </el-button>
																<el-button link type="primary" size="small" @click="deleteTsl(scope.$index, 'functions')">删除 </el-button>
															</template>
														</el-table-column>
													</el-table>
												</el-scrollbar>
											</el-main>
										</el-container>
									</el-tab-pane>
									<el-tab-pane label="事件定义" name="third">
										<el-container>
											<el-header style="text-align: right" height="40px">
												<el-button type="primary" @click="addTsl('events')">添加</el-button>
												<el-drawer v-model="isShowEventsDrawer" title="事件" :append-to-body="true">
													<el-card class="layout-padding-auto" style="height: 96%; margin: 10px; overflow-y: auto">
														<el-form
															label-position="top"
															label-width="100px"
															style="max-width: 460px"
															:model="eventsForm"
															ref="eventsFormRef"
															:rules="eventsRules"
														>
															<el-form-item label="事件标识" prop="id">
																<el-input v-model="eventsForm.id" placeholder="请输入事件标识" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="事件名称" prop="name">
																<el-input v-model="eventsForm.name" placeholder="请输入事件名称" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="事件级别" prop="expands.level">
																<el-radio-group v-model="eventsForm.expands.level">
																	<el-radio-button label="ordinary">普通</el-radio-button>
																	<el-radio-button label="warn">警告</el-radio-button>
																	<el-radio-button label="urgent">紧急</el-radio-button>
																</el-radio-group>
															</el-form-item>
															<el-form-item label="输出参数" prop="valueType.type">
																<el-select v-model="eventsForm.valueType.type" placeholder="请选择输出参数" clearable>
																	<el-option-group v-for="group in dataTypeList" :key="group.name" :label="group.name">
																		<el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id" />
																	</el-option-group>
																</el-select>
															</el-form-item>
															<div style="margin-bottom: 20px">
																<el-form-item
																	label="精度"
																	prop="valueType.scale"
																	v-if="eventsForm.valueType.type === 'float' || eventsForm.valueType.type === 'double'"
																>
																	<el-input-number v-model="eventsForm.valueType.scale" placeholder="请输入精度" :min="1" :max="10"></el-input-number>
																</el-form-item>
																<el-form-item
																	label="单位"
																	prop="valueType.unit"
																	v-if="
																		eventsForm.valueType.type === 'int' ||
																		eventsForm.valueType.type === 'long' ||
																		eventsForm.valueType.type === 'float' ||
																		eventsForm.valueType.type === 'double'
																	"
																>
																	<el-select v-model="eventsForm.valueType.unit" placeholder="请选择输出单位" clearable>
																		<el-option-group v-for="group in unitList" :key="group.id" :label="group.name">
																			<el-option
																				v-for="item in group.options"
																				:key="item.id"
																				:label="item.name + '/' + item.symbol"
																				:value="item.id"
																			/>
																		</el-option-group>
																	</el-select>
																</el-form-item>
																<el-form-item label="最大长度" prop="valueType.expands.maxLength" v-if="eventsForm.valueType.type === 'text'">
																	<el-input-number
																		v-model="eventsForm.valueType.expands.maxLength"
																		placeholder="请输入长度"
																		:min="1"
																		:max="10"
																	></el-input-number>
																</el-form-item>
																<el-form-item label="布尔值" v-if="eventsForm.valueType.type === 'bool'">
																	<div>
																		<el-input v-model="eventsForm.valueType.trueText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="eventsForm.valueType.trueValue" style="display: inline-block; width: 40%" />
																	</div>
																	<div>
																		<el-input v-model="eventsForm.valueType.falseText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="eventsForm.valueType.falseValue" style="display: inline-block; width: 40%" />
																	</div>
																</el-form-item>
																<el-form-item label="时间格式" v-if="eventsForm.valueType.type === 'date'">
																	<el-select v-model="eventsForm.valueType.format" placeholder="请选择时间格式" clearable>
																		<el-option v-for="item in dataFormatList" :key="item.id" :label="item.name" :value="item.id" />
																	</el-select>
																</el-form-item>
															</div>
															<el-form-item label="描述">
																<el-input
																	v-model="eventsForm.description"
																	type="textarea"
																	placeholder="请输入描述"
																	maxlength="150"
																	show-word-limit
																	:rows="4"
																></el-input>
															</el-form-item>
														</el-form>
														<div style="text-align: right; margin-top: 50px">
															<el-button type="primary" size="default" v-if="isEventsAdd" @click="submitTslForm('events')">添 加</el-button>
															<el-button type="primary" size="default" v-else @click="submitTslForm('events')">修 改</el-button>
														</div>
													</el-card>
												</el-drawer>
											</el-header>
											<el-main>
												<el-scrollbar>
													<el-table :data="deviceForm.eventsData">
														<el-table-column prop="id" label="标识" align="center" />
														<el-table-column prop="name" label="名称" align="center" :show-overflow-tooltip="true" />
														<el-table-column prop="expands.level" label="事件级别" align="center">
															<template #default="scope">
																<el-tag type="success" v-if="scope.row.expands.level === 'ordinary'">普通</el-tag>
																<el-tag type="warning" v-if="scope.row.expands.level === 'warn'">警告</el-tag>
																<el-tag type="danger" v-if="scope.row.expands.level === 'urgent'">紧急</el-tag>
															</template>
														</el-table-column>
														<el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true" />
														<el-table-column label="操作" width="120" align="center">
															<template #default="scope">
																<el-button link type="primary" size="small" @click="editTsl(scope.row, scope.$index, 'events')">编辑 </el-button>
																<el-button link type="primary" size="small" @click="deleteTsl(scope.$index, 'events')">删除 </el-button>
															</template>
														</el-table-column>
													</el-table>
												</el-scrollbar>
											</el-main>
										</el-container>
									</el-tab-pane>
									<el-tab-pane label="标签定义" name="fourth">
										<el-container>
											<el-header style="text-align: right" height="40px">
												<el-button type="primary" @click="addTsl('tags')">添加 </el-button>
												<el-drawer v-model="isShowTagsDrawer" title="标签" :append-to-body="true">
													<el-card class="layout-padding-auto" style="height: 96%; margin: 10px; overflow-y: auto">
														<el-form
															label-position="top"
															label-width="100px"
															style="max-width: 460px"
															:model="tagsForm"
															ref="tagsFormRef"
															:rules="tagsRules"
														>
															<el-form-item label="标签标识" prop="id">
																<el-input v-model="tagsForm.id" placeholder="请输入标签标识" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="标签名称" prop="name">
																<el-input v-model="tagsForm.name" placeholder="请输入标签名称" clearable maxlength="10"></el-input>
															</el-form-item>
															<el-form-item label="数据类型" prop="valueType.type">
																<el-select v-model="tagsForm.valueType.type" placeholder="请选择数据类型" clearable>
																	<el-option-group v-for="group in dataTypeList" :key="group.name" :label="group.name">
																		<el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.id" />
																	</el-option-group>
																</el-select>
															</el-form-item>
															<div style="margin-bottom: 20px">
																<el-form-item
																	label="单位"
																	prop="valueType.unit"
																	v-if="
																		tagsForm.valueType.type === 'int' ||
																		tagsForm.valueType.type === 'long' ||
																		tagsForm.valueType.type === 'float' ||
																		tagsForm.valueType.type === 'double'
																	"
																>
																	<el-select v-model="tagsForm.valueType.unit" placeholder="请选择单位" clearable>
																		<el-option-group v-for="group in unitList" :key="group.id" :label="group.name">
																			<el-option
																				v-for="item in group.options"
																				:key="item.id"
																				:label="item.name + '/' + item.symbol"
																				:value="item.id"
																			/>
																		</el-option-group>
																	</el-select>
																</el-form-item>
																<el-form-item
																	label="精度"
																	prop="valueType.scale"
																	v-if="tagsForm.valueType.type === 'float' || tagsForm.valueType.type === 'double'"
																>
																	<el-input-number v-model="tagsForm.valueType.scale" placeholder="请输入精度" :min="1" :max="10"></el-input-number>
																</el-form-item>
																<el-form-item label="最大长度" prop="valueType.expands.maxLength" v-if="tagsForm.valueType.type === 'text'">
																	<el-input-number
																		v-model="tagsForm.valueType.expands.maxLength"
																		placeholder="请输入长度"
																		:min="1"
																		:max="10"
																	></el-input-number>
																</el-form-item>
																<el-form-item label="布尔值" prop="valueType.trueText" v-if="tagsForm.valueType.type === 'bool'">
																	<div>
																		<el-input v-model="tagsForm.valueType.trueText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="tagsForm.valueType.trueValue" style="display: inline-block; width: 40%" />
																	</div>
																	<div>
																		<el-input v-model="tagsForm.valueType.falseText" style="display: inline-block; width: 40%" />
																		<span style="margin: 0 20px">~</span>
																		<el-input v-model="tagsForm.valueType.falseValue" style="display: inline-block; width: 40%" />
																	</div>
																</el-form-item>
																<el-form-item label="时间格式" prop="valueType.format" v-if="tagsForm.valueType.type === 'date'">
																	<el-select v-model="tagsForm.valueType.format" placeholder="请选择时间格式" clearable>
																		<el-option v-for="item in dataFormatList" :key="item.id" :label="item.name" :value="item.id" />
																	</el-select>
																</el-form-item>
															</div>
															<el-form-item label="是否只读" prop="expands.readOnly">
																<el-radio-group v-model="tagsForm.expands.readOnly">
																	<el-radio-button label="true">是</el-radio-button>
																	<el-radio-button label="false">否</el-radio-button>
																</el-radio-group>
															</el-form-item>
															<el-form-item label="描述">
																<el-input
																	v-model="tagsForm.description"
																	type="textarea"
																	placeholder="请输入描述"
																	maxlength="150"
																	show-word-limit
																	:rows="4"
																></el-input>
															</el-form-item>
														</el-form>
														<div style="text-align: right; margin-top: 50px">
															<el-button type="primary" size="default" v-if="isTagsAdd" @click="submitTslForm('tags')">添 加</el-button>
															<el-button type="primary" size="default" v-else @click="submitTslForm('tags')">修 改</el-button>
														</div>
													</el-card>
												</el-drawer>
											</el-header>
											<el-main>
												<el-scrollbar>
													<el-table :data="deviceForm.tagsData">
														<el-table-column prop="id" label="标识" align="center" />
														<el-table-column prop="name" label="名称" align="center" :show-overflow-tooltip="true" />
														<el-table-column prop="valueType.type" label="数据类型" align="center" />
														<el-table-column prop="expands.readOnly" label="是否只读" align="center">
															<template #default="scope">
																<el-tag type="success" v-if="scope.row.expands.readOnly === 'true'">是</el-tag>
																<el-tag type="info" v-else>否</el-tag>
															</template>
														</el-table-column>
														<el-table-column prop="description" label="说明" align="center" :show-overflow-tooltip="true" />
														<el-table-column label="操作" width="120" align="center">
															<template #default="scope">
																<el-button link type="primary" size="small" @click="editTsl(scope.row, scope.$index, 'tags')">编辑 </el-button>
																<el-button link type="primary" size="small" @click="deleteTsl(scope.$index, 'tags')">删除 </el-button>
															</template>
														</el-table-column>
													</el-table>
												</el-scrollbar>
											</el-main>
										</el-container>
									</el-tab-pane>
								</el-tabs>
							</el-tab-pane>
							<!--              <el-tab-pane label="告警设置" name="third"></el-tab-pane>-->
							<!--              <el-tab-pane label="日志管理" name="four"></el-tab-pane>-->
							<!--              <el-tab-pane label="可视化" name="five"></el-tab-pane>-->
						</el-tabs>
					</el-card>
				</el-main>
			</el-container>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, toRefs, unref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import JsonViewer from 'vue-json-viewer';
import {
	dataFormatList,
	dataTypeList,
	deviceTypeList,
	messageProtocolList,
	sourceList,
	storePolicyList,
	transportProtocolList,
	unitList,
} from '/@/utils/iotdict.ts';
import deviceBg from '/@/assets/iot/device.webp';
import { getProduct } from '/@/api/iot/product';
import { editDeviceState, editDeviceTsl, getDevice } from '/@/api/iot/device';

export default defineComponent({
	name: 'deviceView',
	props: {
		deptTree: {
			type: Array,
			default: () => [],
		},
	},
	components: { JsonViewer },
	setup(prop, { emit }) {
		const { proxy } = getCurrentInstance() as any;
		const propertiesFormRef = ref<HTMLElement | null>(null);
		const functionsFormRef = ref<HTMLElement | null>(null);
		const eventsFormRef = ref<HTMLElement | null>(null);
		const tagsFormRef = ref<HTMLElement | null>(null);
		const state = reactive({
			isShowDrawer: false,
			// 设备数据
			deviceForm: {
				id: 0,
				deptId: 0,
				productId: 0,
				name: '',
				metadata: { properties: <any>[], functions: <any>[], events: <any>[], tags: <any>[] },
				state: 0,
				describe: '',
				// 名称
				deptName: '',
				createTimeStr: '',
				// 数据
				propertiesData: <any>[],
				functionsData: <any>[],
				eventsData: <any>[],
				tagsData: <any>[],
			},
			// 产品数据
			productForm: {
				id: 0,
				name: '',
				describe: '',
				// 名称
				deptName: '',
				transportProtocolName: '',
				messageProtocolName: '',
				storePolicyName: '',
				deviceTypeName: '',
			},
			// 物模型-属性数据
			propertiesForm: {
				id: '',
				name: '',
				valueType: { type: '', expands: {}, elements: [] },
				expands: { readOnly: '', source: '' },
				description: '',
			},
			isPropertiesAdd: false,
			propertiesIndex: 0,
			propertiesRules: {
				id: [{ required: true, message: '属性标识不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '属性名称不能为空', trigger: 'blur' }],
				'valueType.type': [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
				'valueType.unit': [{ required: true, message: '单位不能为空', trigger: 'blur' }],
				'valueType.scale': [{ required: true, message: '精度不能为空', trigger: 'blur' }],
				'valueType.expands.maxLength': [{ required: true, message: '最大长度不能为空', trigger: 'blur' }],
				'valueType.trueText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.trueValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.falseText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.falseValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.format': [{ required: true, message: '时间格式不能为空', trigger: 'blur' }],
				'expands.readOnly': [{ required: true, message: '是否只读不能为空', trigger: 'blur' }],
				'expands.source': [{ required: true, message: '属性来源不能为空', trigger: 'blur' }],
			},
			// 物模型-功能数据
			functionsForm: {
				id: '',
				name: '',
				async: false,
				inputs: [],
				output: { type: '', expands: {}, elements: [] },
				description: '',
			},
			isFunctionsAdd: false,
			functionsIndex: 0,
			functionsRules: {
				id: [{ required: true, message: '功能标识不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '功能名称不能为空', trigger: 'blur' }],
				async: [{ required: true, message: '是否异步不能为空', trigger: 'blur' }],
				'output.type': [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
				'output.unit': [{ required: true, message: '单位不能为空', trigger: 'blur' }],
				'output.scale': [{ required: true, message: '精度不能为空', trigger: 'blur' }],
				'output.expands.maxLength': [{ required: true, message: '最大长度不能为空', trigger: 'blur' }],
				'output.trueText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'output.trueValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'output.falseText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'output.falseValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'output.format': [{ required: true, message: '时间格式不能为空', trigger: 'blur' }],
			},
			// 物模型-事件数据
			eventsForm: {
				id: '',
				name: '',
				valueType: { type: '', expands: {}, elements: [] },
				expands: { level: '' },
				description: '',
			},
			isEventsAdd: false,
			eventsIndex: 0,
			eventsRules: {
				id: [{ required: true, message: '事件标识不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '事件名称不能为空', trigger: 'blur' }],
				'valueType.type': [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
				'valueType.unit': [{ required: true, message: '单位不能为空', trigger: 'blur' }],
				'valueType.scale': [{ required: true, message: '精度不能为空', trigger: 'blur' }],
				'valueType.expands.maxLength': [{ required: true, message: '最大长度不能为空', trigger: 'blur' }],
				'valueType.trueText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.trueValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.falseText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.falseValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.format': [{ required: true, message: '时间格式不能为空', trigger: 'blur' }],
				'expands.level': [{ required: true, message: '事件级别不能为空', trigger: 'blur' }],
			},
			// 物模型-标签数据
			tagsForm: {
				id: '',
				name: '',
				valueType: { type: '', expands: {}, elements: [] },
				expands: { readOnly: '' },
				description: '',
			},
			isTagsAdd: false,
			tagsIndex: 0,
			tagsRules: {
				id: [{ required: true, message: '标签标识不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
				'valueType.type': [{ required: true, message: '数据类型不能为空', trigger: 'blur' }],
				'valueType.unit': [{ required: true, message: '单位不能为空', trigger: 'blur' }],
				'valueType.scale': [{ required: true, message: '精度不能为空', trigger: 'blur' }],
				'valueType.expands.maxLength': [{ required: true, message: '最大长度不能为空', trigger: 'blur' }],
				'valueType.trueText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.trueValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.falseText': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.falseValue': [{ required: true, message: '布尔值不能为空', trigger: 'blur' }],
				'valueType.format': [{ required: true, message: '时间格式不能为空', trigger: 'blur' }],
				'expands.readOnly': [{ required: true, message: '是否只读不能为空', trigger: 'blur' }],
			},
			// tab数据
			tabsName: 'first',
			tslName: 'first',
			isShowTslDrawer: false,
			isShowPropertiesDrawer: false,
			isShowFunctionsDrawer: false,
			isShowEventsDrawer: false,
			isShowTagsDrawer: false,
			// 字典数据
			messageProtocolList,
			transportProtocolList,
			storePolicyList,
			deviceTypeList,
			dataTypeList,
			sourceList,
			unitList,
			dataFormatList,
		});
		// 删除物模型定义
		const deleteTsl = (index: number, type: string) => {
			ElMessageBox.confirm('确定要删除当前数据吗', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					resetTslForm(type);
					if (type == 'properties') {
						state.propertiesIndex = 0;
						state.deviceForm.metadata.properties.splice(index, 1);
					} else if (type == 'functions') {
						state.functionsIndex = 0;
						state.deviceForm.metadata.functions.splice(index, 1);
					} else if (type == 'events') {
						state.eventsIndex = 0;
						state.deviceForm.metadata.events.splice(index, 1);
					} else if (type == 'tags') {
						state.tagsIndex = 0;
						state.deviceForm.metadata.tags.splice(index, 1);
					}
					editDeviceTsl(state.deviceForm.id, JSON.stringify(state.deviceForm.metadata)).then(() => {
						ElMessage.success('删除成功');
						getData(state.deviceForm.id, state.deviceForm.id);
					});
				})
				.catch(() => {});
		};
		// 新增物模型定义
		const addTsl = (type: string) => {
			resetTslForm(type);
			if (type == 'properties') {
				state.propertiesIndex = 0;
				state.isPropertiesAdd = true;
				state.isShowPropertiesDrawer = true;
			} else if (type == 'functions') {
				state.functionsIndex = 0;
				state.isFunctionsAdd = true;
				state.isShowFunctionsDrawer = true;
			} else if (type == 'events') {
				state.eventsIndex = 0;
				state.isEventsAdd = true;
				state.isShowEventsDrawer = true;
			} else if (type == 'tags') {
				state.tagsIndex = 0;
				state.isTagsAdd = true;
				state.isShowTagsDrawer = true;
			}
		};
		// 编辑物模型定义
		const editTsl = (row: any, index: number, type: string) => {
			resetTslForm(type);
			if (type == 'properties') {
				state.propertiesIndex = index;
				state.isPropertiesAdd = false;
				state.propertiesForm = JSON.parse(JSON.stringify(row));
				state.isShowPropertiesDrawer = true;
			} else if (type == 'functions') {
				state.functionsIndex = index;
				state.isFunctionsAdd = false;
				state.functionsForm = JSON.parse(JSON.stringify(row));
				state.isShowFunctionsDrawer = true;
			} else if (type == 'events') {
				state.eventsIndex = index;
				state.isEventsAdd = false;
				state.eventsForm = JSON.parse(JSON.stringify(row));
				state.isShowEventsDrawer = true;
			} else if (type == 'tags') {
				state.tagsIndex = index;
				state.isTagsAdd = false;
				state.tagsForm = JSON.parse(JSON.stringify(row));
				state.isShowTagsDrawer = true;
			}
		};
		// 重置物模型表单
		const resetTslForm = (type: string) => {
			if (type == 'properties') {
				let propertiesForm = {
					id: '',
					name: '',
					valueType: { type: '', expands: {}, elements: [] },
					expands: { readOnly: '', source: '' },
					description: '',
				};
				state.propertiesForm = JSON.parse(JSON.stringify(propertiesForm));
			} else if (type == 'functions') {
				let functionsForm = {
					id: '',
					name: '',
					async: false,
					inputs: [],
					output: { type: '', expands: {}, elements: [] },
					description: '',
				};
				state.functionsForm = JSON.parse(JSON.stringify(functionsForm));
			} else if (type == 'events') {
				let eventsForm = {
					id: '',
					name: '',
					valueType: { type: '', expands: {}, elements: [] },
					expands: { level: '' },
					description: '',
				};
				state.eventsForm = JSON.parse(JSON.stringify(eventsForm));
			} else if (type == 'tags') {
				let tagsForm = {
					id: '',
					name: '',
					valueType: { type: '', expands: {}, elements: [] },
					expands: { readOnly: '' },
					description: '',
				};
				state.tagsForm = JSON.parse(JSON.stringify(tagsForm));
			}
		};
		// 提交物模型表单
		const submitTslForm = (type: string) => {
			let ref;
			if (type == 'properties') {
				ref = propertiesFormRef;
				if (state.isPropertiesAdd) {
					state.deviceForm.metadata.properties.push(JSON.parse(JSON.stringify(state.propertiesForm)));
				} else {
					state.deviceForm.metadata.properties[state.propertiesIndex] = JSON.parse(JSON.stringify(state.propertiesForm));
				}
			} else if (type == 'functions') {
				ref = functionsFormRef;
				if (state.isFunctionsAdd) {
					state.deviceForm.metadata.functions.push(JSON.parse(JSON.stringify(state.functionsForm)));
				} else {
					state.deviceForm.metadata.functions[state.functionsIndex] = JSON.parse(JSON.stringify(state.functionsForm));
				}
			} else if (type == 'events') {
				ref = eventsFormRef;
				if (state.isEventsAdd) {
					state.deviceForm.metadata.events.push(JSON.parse(JSON.stringify(state.eventsForm)));
				} else {
					state.deviceForm.metadata.events[state.eventsIndex] = JSON.parse(JSON.stringify(state.eventsForm));
				}
			} else if (type == 'tags') {
				ref = tagsFormRef;
				if (state.isTagsAdd) {
					state.deviceForm.metadata.tags.push(JSON.parse(JSON.stringify(state.tagsForm)));
				} else {
					state.deviceForm.metadata.tags[state.tagsIndex] = JSON.parse(JSON.stringify(state.tagsForm));
				}
			}
			const formWrap = unref(ref) as any;
			if (!formWrap) return;
			formWrap.validate((valid: boolean) => {
				if (valid) {
					editDeviceTsl(state.deviceForm.id, JSON.stringify(state.deviceForm.metadata)).then(() => {
						ElMessage.success('新增成功');
						if (type == 'properties') {
							state.isShowPropertiesDrawer = false;
						} else if (type == 'functions') {
							state.isShowFunctionsDrawer = false;
						} else if (type == 'events') {
							state.isShowEventsDrawer = false;
						} else if (type == 'tags') {
							state.isShowTagsDrawer = false;
						}
						getData(state.deviceForm.id, state.productForm.id);
					});
				}
			});
		};
		// 显示物模型
		const viewTsl = () => {
			state.isShowTslDrawer = true;
		};
		// 编辑设备状态
		const editState = () => {
			ElMessageBox.confirm('确定要在线/离线当前设备吗', '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					editDeviceState(state.deviceForm.id, state.deviceForm.state)
						.then(() => {
							ElMessage.success('在线/离线成功');
							emit('dataList');
						})
						.catch(() => {
							if (state.deviceForm.state == 0) {
								state.deviceForm.state = 1;
							} else {
								state.deviceForm.state = 0;
							}
						});
				})
				.catch(() => {
					if (state.deviceForm.state == 0) {
						state.deviceForm.state = 1;
					} else {
						state.deviceForm.state = 0;
					}
				});
		};
		// 打开弹窗
		const openDrawer = (row?: any) => {
			if (row) {
				getData(row.id, row.productId);
			}
			state.isShowDrawer = true;
		};
		// 获取数据
		const getData = (id: number, productId: number) => {
			// 获取设备信息
			getDevice(id).then((res: any) => {
				let info = res.data.data;
				state.deviceForm.id = info.id;
				state.deviceForm.deptId = info.deptId;
				state.deviceForm.productId = info.productId;
				state.deviceForm.name = info.name;
				state.deviceForm.state = info.state;
				state.deviceForm.describe = info.describe;
				state.deviceForm.createTimeStr = proxy.moment.unix(info.createTime).format('YYYY-MM-DD HH:mm:ss');
				// 处理部门数据
				flatten(prop.deptTree).forEach((val: { deptId: number; deptName: string }) => {
					if (val.deptId === info.deptId) {
						state.deviceForm.deptName = val.deptName;
					}
				});
				// 处理物模型
				if (info.metadata !== '') {
					let tsl = JSON.parse(info.metadata);
					state.deviceForm.metadata = tsl;
					state.deviceForm.propertiesData = tsl.properties;
					state.deviceForm.functionsData = tsl.functions;
					state.deviceForm.eventsData = tsl.events;
					state.deviceForm.tagsData = tsl.tags;
				}
			});
			// 获取产品信息
			getProduct(productId).then((res: any) => {
				let info = res.data.data;
				state.productForm.id = info.id;
				state.productForm.name = info.name;
				state.productForm.describe = info.describe;
				// 消息协议
				state.messageProtocolList.forEach((val: { id: string; name: string }) => {
					if (val.id === info.messageProtocol) {
						state.productForm.messageProtocolName = val.name;
					}
				});
				// 传输协议
				state.transportProtocolList.forEach((val: { id: string; name: string }) => {
					if (val.id === info.transportProtocol) {
						state.productForm.transportProtocolName = val.name;
					}
				});
				// 存储协议
				state.storePolicyList.forEach((val: { id: string; name: string }) => {
					if (val.id === info.storePolicy) {
						state.productForm.storePolicyName = val.name;
					}
				});
				// 设备类型
				state.deviceTypeList.forEach((val: { id: string; name: string }) => {
					if (val.id === info.deviceType) {
						state.productForm.deviceTypeName = val.name;
					}
				});
				// 处理部门数据
				flatten(prop.deptTree).forEach((val: { deptId: number; deptName: string }) => {
					if (val.deptId === info.deptId) {
						state.productForm.deptName = val.deptName;
					}
				});
			});
		};
		// 处理部门数据
		const flatten = (deptList: any): any[] => {
			let flatArray = [];
			for (let item of deptList) {
				flatArray.push(item);
				if (item.children && Array.isArray(item.children)) {
					flatArray = [...flatArray, ...flatten(item.children)];
				}
			}
			return flatArray;
		};
		return {
			deviceBg,
			flatten,
			resetTslForm,
			addTsl,
			getData,
			deleteTsl,
			editTsl,
			submitTslForm,
			viewTsl,
			editState,
			openDrawer,
			propertiesFormRef,
			functionsFormRef,
			eventsFormRef,
			tagsFormRef,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
.work-break {
	word-break: keep-all;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
